<template>
  <div class="uploadImg public">
    <div v-if="isImg == 1" class="uploadImg-noImg">
      <h1 class="uploadImg-noImg-title">拍照/上传</h1>
      <h2 class="uploadImg-noImg-tips">您可以选择打开相册或直接拍照</h2>
      <div class="uploadImg-noImg-uploadContent">
        <div class="uploadImg-noImg-uploadContent-img">
          <img :src="mySelfImg" alt="" />
        </div>
      </div>
      <div class="uploadImg-noImg-imgTips">— 满足以下要求结果更准确 —</div>
      <div class="uploadImg-noImg-tabs">
        <div class="uploadImg-noImg-tabs-item" v-for="(item, index) in tabsList" :key="index">{{ item }}</div>
      </div>
      <!-- <el-button class="uploadImg-noImg-btn">拍照/上传美照</el-button> -->
      <form id="form">
        <label for="submit">
          <div class="uploadImg-noImg-btn"><span>拍照/上传美照</span></div>
        </label>
        <input id="submit" type="file" style="display: none" @change="getFile" />
      </form>
    </div>
    <div v-else-if="isImg == 2" class="uploadImg-haveImg">
      <div class="uploadImg-haveImg-top">
        <img class="uploadImg-haveImg-top-img" :src="mySelfImg" alt="" />
      </div>
      <div class="uploadImg-haveImg-bottom">
        <div class="uploadImg-haveImg-bottom-result" v-for="(item, index) in result" :key="index">
          <div class="uploadImg-haveImg-bottom-result-left">{{ item.part }}姿势：</div>
          <div class="uploadImg-haveImg-bottom-result-center">{{ item.recognitionResult }}</div>
          <div class="uploadImg-haveImg-bottom-result-right">
            <img v-if="item.isPass == '是'" src="@/assets/img/photograph_rg.png" alt="" />
            <img v-else src="@/assets/img/photograph_no.png" alt="" />
          </div>
        </div>
        <div class="uploadImg-haveImg-bottom-submit">
          <el-button class="uploadImg-haveImg-bottom-submit-right" @click="submit">确认提交</el-button>
          <div class="uploadImg-haveImg-bottom-submit-rest" @click="isImg = 1">重新上传</div>
        </div>
      </div>
    </div>
    <div v-else-if="isImg == 3" class="uploadImg-loading">
      <div class="uploadImg-loading-top" :style="bgStyle">
        <div class="uploadImg-loading-top-bar"></div>
        <div class="uploadImg-loading-top-box">
          <img class="uploadImg-loading-top-box-img" :src="mySelfImg" alt="" />
        </div>
      </div>
      <div class="uploadImg-loading-bottom">
        <div class="uploadImg-loading-bottom-title">
          <div class="uploadImg-loading-bottom-title-l">1.测量三庭长度</div>
          <span style="opacity: 0.7">一</span>
          <div class="uploadImg-loading-bottom-title-c">2.定位五官</div>
          <span style="opacity: 0.7">一</span>
          <div class="uploadImg-loading-bottom-title-r">3.综合分析</div>
        </div>
        <div class="uploadImg-loading-bottom-bigBox">
          <div class="uploadImg-loading-bottom-bigBox-content">
            <div class="uploadImg-loading-bottom-bigBox-content-box" v-for="(item, index) in loadingContent" :key="index">
              <div class="uploadImg-loading-bottom-bigBox-content-box-name">{{ item.name }}</div>
              <div class="uploadImg-loading-bottom-bigBox-content-box-progress">
                <el-progress
                  class="uploadImg-loading-bottom-bigBox-content-box-progress-l"
                  :stroke-width="strokeWidth"
                  :show-text="false"
                  :percentage="item.progress"
                ></el-progress>
                <img
                  v-if="item.progress != 100"
                  class="uploadImg-loading-bottom-bigBox-content-box-progress-lod"
                  src="@/assets/img/orange_loading.png"
                  alt=""
                />
                <img v-else class="uploadImg-loading-bottom-bigBox-content-box-progress-fin" src="@/assets/img/pay_select.png" alt="" />
              </div>
            </div>
          </div>
          <div class="uploadImg-loading-bottom-bigBox-content">
            <div class="uploadImg-loading-bottom-bigBox-content-box" v-for="(item, index) in loadingContent2" :key="index">
              <div class="uploadImg-loading-bottom-bigBox-content-box-name">{{ item.name }}</div>
              <div class="uploadImg-loading-bottom-bigBox-content-box-progress">
                <el-progress
                  class="uploadImg-loading-bottom-bigBox-content-box-progress-l"
                  :stroke-width="strokeWidth"
                  :show-text="false"
                  :percentage="item.progress"
                ></el-progress>
                <img
                  v-if="item.progress != 100"
                  class="uploadImg-loading-bottom-bigBox-content-box-progress-lod"
                  src="@/assets/img/orange_loading.png"
                  alt=""
                />
                <img v-else class="uploadImg-loading-bottom-bigBox-content-box-progress-fin" src="@/assets/img/pay_select.png" alt="" />
              </div>
            </div>
          </div>
          <div class="uploadImg-loading-bottom-bigBox-content">
            <div class="uploadImg-loading-bottom-bigBox-content-box" v-for="(item, index) in loadingContent3" :key="index">
              <div class="uploadImg-loading-bottom-bigBox-content-box-name">{{ item.name }}</div>
              <div class="uploadImg-loading-bottom-bigBox-content-box-progress">
                <el-progress
                  class="uploadImg-loading-bottom-bigBox-content-box-progress-l"
                  :stroke-width="strokeWidth"
                  :show-text="false"
                  :percentage="item.progress"
                ></el-progress>
                <img
                  v-if="item.progress != 100"
                  class="uploadImg-loading-bottom-bigBox-content-box-progress-lod"
                  src="@/assets/img/orange_loading.png"
                  alt=""
                />
                <img v-else class="uploadImg-loading-bottom-bigBox-content-box-progress-fin" src="@/assets/img/pay_select.png" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="loading">
        <svg version="1.2" height="300" width="600" xmlns="http://www.w3.org/2000/svg" viewport="0 0 60 60" xmlns:xlink="http://www.w3.org/1999/xlink">
          <path
            id="pulsar"
            stroke="rgba(0,155,155,1)"
            fill="none"
            stroke-width="1"
            stroke-linejoin="round"
            d="M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210"
          />
        </svg>
      </div>

      <div class="loading-page">
        <div class="counter">
          <h1>0%</h1>
          <hr />
        </div>
      </div> -->
    </div>
  </div>
</template>
<script>
import $ from 'jquery';
import { facialAnalysischeck } from '@/api/api.js';
export default {
  data() {
    return {
      reportData: false,
      getCont: false,
      isImg: 1,
      strokeWidth: 8,
      tabsList: ['正面', '面部完整呈现', '无刘海遮挡', '五官清晰', '不戴眼镜'],
      mySelfImg: require('@/assets/img/photograph_pic.png'),
      bgStyle: {
        backgroundImage: require('@/assets/img/photograph_pic.png')
      },
      result: [],
      loadingContent: [
        {
          name: '上庭数据提取',
          progress: 0
        },
        {
          name: '中庭数据提取',
          progress: 0
        },
        {
          name: '下庭数据提取',
          progress: 0
        }
      ],
      loadingContent2: [
        {
          name: '定位眉头-眉峰-眉尾',
          progress: 0
        },
        {
          name: '定位眼长-眼高',
          progress: 0
        },
        {
          name: '定位鼻高-鼻翼宽',
          progress: 0
        },
        {
          name: '定位嘴宽-嘴唇厚度',
          progress: 0
        }
      ],
      loadingContent3: [
        {
          name: '量取下颚角度',
          progress: 0
        },
        {
          name: '对比各部位数据',
          progress: 0
        },
        {
          name: '匹配五行格局',
          progress: 0
        }
      ]
    };
  },
  watch: {
    reportData: {
      handler(newVal) {
        if (newVal && this.getCont) {
          this.$toast.clear();
          this.$router.push('/report');
        }
      }
    },
    getCont: {
      handler(newVal) {
        if (newVal && this.reportData) {
          this.$toast.clear();
          this.$router.push('/report');
        }
      }
    }
  },
  mounted() {},
  methods: {
    getContent() {
      let int = setInterval(() => {
        this.loadingContent[0].progress++;
        if (this.loadingContent[0].progress == 20) {
          let int2 = setInterval(() => {
            this.loadingContent[1].progress++;
            if (this.loadingContent[1].progress == 20) {
              let int3 = setInterval(() => {
                this.loadingContent[2].progress++;
                if (this.loadingContent[2].progress == 100) {
                  clearInterval(int3);
                  this.nextScanning(1);
                }
              }, 30);
            }
            if (this.loadingContent[1].progress == 100) {
              clearInterval(int2);
            }
          }, 30);
        }
        if (this.loadingContent[0].progress == 100) {
          clearInterval(int);
        }
      }, 30);
    },
    getContent2() {
      let int = setInterval(() => {
        this.loadingContent2[0].progress++;
        if (this.loadingContent2[0].progress == 20) {
          let int2 = setInterval(() => {
            this.loadingContent2[1].progress++;
            if (this.loadingContent2[1].progress == 20) {
              let int3 = setInterval(() => {
                this.loadingContent2[2].progress++;
                if (this.loadingContent2[2].progress == 20) {
                  let int4 = setInterval(() => {
                    this.loadingContent2[3].progress++;
                    if (this.loadingContent2[3].progress == 100) {
                      clearInterval(int4);
                      this.nextScanning(2);
                    }
                  }, 30);
                }
                if (this.loadingContent2[2].progress == 100) {
                  clearInterval(int3);
                }
              }, 30);
            }
            if (this.loadingContent2[1].progress == 100) {
              clearInterval(int2);
            }
          }, 30);
        }
        if (this.loadingContent2[0].progress == 100) {
          clearInterval(int);
        }
      }, 30);
    },
    getContent3() {
      let that = this;
      let int = setInterval(() => {
        this.loadingContent3[0].progress++;
        if (this.loadingContent3[0].progress == 20) {
          let int2 = setInterval(() => {
            this.loadingContent3[1].progress++;
            if (this.loadingContent3[1].progress == 20) {
              let int3 = setInterval(() => {
                this.loadingContent3[2].progress++;
                if (this.loadingContent3[2].progress == 100) {
                  clearInterval(int3);
                  this.getCont = true;
                  this.$toast.loading({
                    duration: 0,
                    forbidClick: true,
                    message: '分析中...'
                  });
                }
              }, 30);
            }
            if (this.loadingContent3[1].progress == 100) {
              clearInterval(int2);
            }
          }, 30);
        }
        if (this.loadingContent3[0].progress == 100) {
          clearInterval(int);
        }
      }, 30);
    },
    nextScanning(e) {
      let that = this;
      if (e == 1) {
        setTimeout(() => {
          document.querySelector('.uploadImg-loading-bottom-title-c').classList.add('green');
          document.querySelector('.uploadImg-loading-bottom-bigBox').classList.add('transFrom');
          setTimeout(() => {
            that.getContent2();
          }, 2000);
        }, 1000);
      } else {
        setTimeout(() => {
          document.querySelector('.uploadImg-loading-bottom-title-r').classList.add('green');
          document.querySelector('.uploadImg-loading-bottom-bigBox').classList.add('transFrom2');
          setTimeout(() => {
            that.getContent3();
          }, 2000);
        }, 1000);
      }
    },

    getFile(event) {
      let that = this;
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append('file', file);
      this.$toast.loading({
        duration: 0,
        forbidClick: true,
        message: '验证中...'
      });
      let URL = window.URL || window.webkitURL;
      this.mySelfImg = URL.createObjectURL(file);
      this.bgStyle = {
        backgroundImage: `url('${this.mySelfImg}')` // 构建内联样式对象，设置背景图片地址
      };
      localStorage.setItem('imgUrl', this.mySelfImg);

      // 检查是否已经有存储的唯一标识
      let deviceId = localStorage.getItem('deviceId');
      if (!deviceId) {
        // 如果没有，生成一个UUID作为唯一标识（这里只是简单示意，实际可以使用更复杂的UUID生成库）
        deviceId = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
          var r = (Math.random() * 16) | 0,
            v = c === 'x' ? r : (r & 0x3) | 0x8;
          return v.toString(16);
        });
        localStorage.setItem('deviceId', deviceId);
      }
      formData.append('userId', deviceId);
      this.$axios
        .post('/ai-api/facialAnalysis/check', formData)
        .then((res) => {
          console.log('上传成功', res.data.data);
          this.result = res.data.data;
          this.$toast.clear();
          this.isImg = 2;
          const isNotPass = this.result.some((item) => item.isPass === '否');
          if (!isNotPass) this.getReportData(formData);
        })
        .catch((err) => {
          this.$toast.clear();
          this.$toast.loading({
            duration: 2000,
            forbidClick: true,
            message: err
          });
        });

      return;
      setTimeout(() => {
        that.$toast.clear();
        this.isImg = 2;
      }, 2000);
    },
    getReportData(formData) {
      this.reportData = false;
      this.$axios
        .post('/ai-api/facialAnalysis/analysis', formData)
        .then((res) => {
          this.reportData = true;
          localStorage.setItem('faceDesc', JSON.stringify(res.data.data));
        })
        .catch((err) => {
          this.$toast.clear();
          this.$toast.loading({
            duration: 2000,
            forbidClick: true,
            message: err
          });
          this.getReportData();
        });
    },
    submit() {
      const isNotPass = this.result.some((item) => item.isPass === '否');
      if (isNotPass) {
        this.$dialog.alert({
          message: '请重新上传',
          theme: 'round-button'
        });
        return;
      }
      let that = this;
      this.$toast.loading({
        duration: 0,
        forbidClick: true,
        message: '分析中...'
      });
      setTimeout(() => {
        that.$toast.clear();
        that.isImg = 3;
        this.getContent();
      }, 1000);
      // setTimeout(() => {
      // console.log(document.querySelector('.uploadImg-loading-top'));
      // document.querySelector('.uploadImg-loading-top').classList.add('circle');
      // document.querySelector('.uploadImg-loading-top-box').classList.add('circle');
      // document.querySelector('.uploadImg-loading-top-box-img').classList.add('circle');

      // $(document).ready(function () {
      //   var counter = 0;
      //   var c = 0;
      //   var i = setInterval(function () {
      //     $('.loading-page .counter h1').html(c + '%');
      //     $('.loading-page .counter hr').css('width', c + '%');
      //     counter++;
      //     c++;
      //     if (counter == 101) {
      //       clearInterval(i);
      //       that.$router.push('/report');
      //     }
      // }, 100);
      // })
      // }, 1000)
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-progress-bar__inner {
  background-color: #1ffbbb !important;
}
::v-deep .el-progress-bar__outer {
  background-color: #3d3d4e !important;
}
.circle {
  border-radius: 50%;
  /* 变为圆形 */
}
.green {
  color: #1ffbbb;
}
.transFrom {
  animation: trans 1s linear 0s 1 forwards;
}
.transFrom2 {
  animation: trans2 1s linear 0s 1 forwards;
}
.loading {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  svg {
    width: 100%;
    height: 100%;
  }
  #pulsar {
    stroke-dasharray: 281;
    animation: dash 2.5s infinite linear forwards;
  }
}
.loading-page {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  .counter {
    text-align: center;
    position: relative;
    width: 70%;
    h1 {
      color: #1ffbbb;
      font-size: 1.4rem;
    }
    hr {
      background: #1ffbbb;
      border: none;
      height: 1px;
    }
  }
}
/*Animation*/
@keyframes dash {
  from {
    stroke-dashoffset: 814;
  }
  to {
    stroke-dashoffset: -814;
  }
}
@keyframes scan {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(4.9rem);
  }
}
@keyframes trans {
  0% {
    transform: translateX(0px);
    // left: 100%;
  }
  100% {
    // left: 0;
    transform: translateX(-33%);
  }
}
@keyframes trans2 {
  0% {
    transform: translateX(-33%);
    // left: 100%;
  }
  100% {
    // left: 0;
    transform: translateX(-66%);
  }
}
@keyframes setHeight {
  to {
    height: 5.386667rem;
  }
}
@keyframes setFilter {
  25% {
    -webkit-filter: blur(2px);
  }
  50% {
    -webkit-filter: hue-rotate(50deg);
  }
  75% {
    -webkit-filter: saturate(200%);
  }
  100% {
    -webkit-filter: hue-rotate(250deg);
  }
}
@keyframes loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes show {
  0% {
    visibility: hidden;
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}

.uploadImg {
  background-image: url('@/assets/img/write_bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  &-noImg {
    display: flex;
    align-items: center;
    flex-direction: column;
    &-title {
      font-size: 0.586667rem;
      font-family: SourceHanSansSC-Bold, SourceHanSansSC;
      font-weight: 700;
      color: #fff;
      line-height: 0.853333rem;
      margin-top: 1.146667rem;
    }
    &-tips {
      font-size: 0.373333rem;
      font-family: SourceHanSansSC-Regular, SourceHanSansSC;
      font-weight: 400;
      color: #c5c9d1;
      line-height: 0.533333rem;
      margin-top: 0.173333rem;
    }
    &-uploadContent {
      width: 5.706667rem;
      height: 5.706667rem;
      margin: 0 auto;
      margin-top: 0.733333rem;
      &-img {
        position: relative;
        display: inline-block;
        img {
          width: 5.706667rem;
          height: 5.706667rem;
        }
      }
    }
    &-imgTips {
      font-size: 0.406667rem;
      font-family: SourceHanSansSC-Medium, SourceHanSansSC;
      font-weight: 500;
      color: #fff;
      line-height: 0.613333rem;
      margin-top: 0.56rem;
      margin-bottom: 0.2rem;
    }
    &-tabs {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      font-size: 0.373333rem;
      font-family: SourceHanSansSC-Regular, SourceHanSansSC;
      font-weight: 400;
      text-align: center;
      color: #c5c9d1;
      &-item {
        height: 0.84rem;
        padding: 0 0.373333rem;
        margin: 0.213333rem;
        line-height: 0.84rem;
        letter-spacing: 0.013333rem;
        background: #272736;
        border-radius: 0.053333rem;
      }
    }
    &-btn {
      position: relative;
      width: 7.493333rem;
      height: 1.28rem;
      background: #1ffbbb;
      border-radius: 0.693333rem;
      font-size: 0.48rem;
      font-family: SourceHanSansSC-Medium, SourceHanSansSC;
      font-weight: 700;
      color: #333;
      line-height: 1.2rem;
      text-align: center;
      letter-spacing: 0.013333rem;
      margin-top: 1.666667rem;
      cursor: pointer;
    }
  }
  &-haveImg {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    z-index: 1;
    transition: background-color 1s;
    transition-delay: 1s;
    min-height: 100%;
    &-top {
      background-image: url('@/assets/img/photograph_dg.png');
      width: 5.413333rem;
      height: 5.386667rem;
      margin: 2.093333rem auto 1.12rem;
      padding: 0.24rem 0.226667rem;
      background-size: 100%;
      background-repeat: no-repeat;
      &-img {
        width: 100%;
        height: 100%;
        background-color: #fff;
        transition: all 1s;
        border-radius: 0.106667rem;
        overflow: hidden;
      }
    }
    &-bottom {
      transition: display 1s;
      transition-delay: 1s;
      &-result {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 0.893333rem;
        margin: 0 auto;
        width: 7.493333rem;
        height: 1.106667rem;
        background: #272736;
        border-radius: 0.56rem;
        padding: 0 0.24rem 0 0.426667rem;
        margin-bottom: 0.32rem;
        font-size: 0.4rem;
        font-weight: 400;
        line-height: 0.586667rem;
        &-left {
          width: 2.066667rem;
          height: 0.586667rem;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          color: #c5c9d1;
        }
        &-center {
          width: 60%;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          color: #fff;
        }
        &-right {
          width: 0.64rem;
          height: 0.64rem;
          position: relative;
          display: inline-block;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      &-submit {
        position: relative;
        margin-top: 1.333333rem;
        text-align: center;
        padding-bottom: 1rem;
        &-right {
          position: relative;
          width: 7.493333rem;
          height: 1.28rem;
          background: #1ffbbb;
          border-radius: 0.693333rem;
          font-size: 0.48rem;
          font-family: SourceHanSansSC-Medium, SourceHanSansSC;
          font-weight: 600;
          color: #333;
          margin: 0 auto;
          margin-bottom: 0.626667rem;
          cursor: pointer;
        }
        &-rest {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 0.586667rem;
          font-size: 0.4rem;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          font-weight: 400;
          color: #1ffbbb;
          line-height: 0.586667rem;
          margin: 0 auto;
          cursor: pointer;
        }
      }
    }
  }
  &-loading {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    z-index: 1;
    transition: background-color 1s;
    transition-delay: 1s;
    min-height: 100%;
    &-top {
      width: 5.413333rem;
      height: 5.386667rem;
      margin: 2.333333rem auto 1.12rem;
      //   padding: 0.24rem 0.226667rem;
      // background: url('@/assets/img/photograph_pic.png') no-repeat;
      background-position: 100% 100%;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      transition: border-radius 2s;

      &-bar {
        position: relative;
        z-index: 1000;
        width: 100%;
        height: 0.5rem;
        // opacity: 0.3;
        animation: scan 3s 100 alternate;
        // box-shadow: inset 1px 10px 125px 10px rgba(255, 255, 255, 0.8);
        background-image: url('@/assets/img/img_0.png');
        background-position: 100% 100%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      &-box {
        margin: -0.5rem auto 0;
        width: 5.4rem;
        height: 0px;
        overflow: hidden;
        animation: setHeight 3s 100 alternate;
        transition: border-radius 2s;

        &-img {
          width: 5.413333rem;
          height: 5.386667rem;
          background-color: #fff;
          transition: all 1s;
          overflow: hidden;
          transition: border-radius 2s;
          animation: setFilter 24s 1 alternate;
        }
      }
    }
    &-bottom {
      padding: 0.5rem 0;
      background: #1b1b2c;
      border-radius: 20px 20px 0 0;
      &-title {
        padding: 0 0.6rem;
        margin: auto;
        display: flex;
        justify-content: space-around;
        font-size: 0.43rem;
        color: #c5c9d1;
        font-weight: 900;
        &-l {
          color: #1ffbbb;
        }
      }
      &-bigBox {
        display: flex;
        overflow: hidden;
        width: 29.4rem;
        &-content {
          margin: 0.7rem 0.6rem;
          width: 8.7rem;

          &-box {
            margin-bottom: 0.8rem;
            &-name {
              font-size: 0.43rem;
              font-weight: 700;
              color: #fff;
              margin-bottom: 0.2rem;
            }
            &-progress {
              display: flex;
              align-items: center;
              justify-content: space-between;
              &-l {
                width: 90%;
              }
              img {
                width: 0.48rem;
                height: 0.48rem;
              }
              &-lod {
                animation: loading 2s linear infinite;
              }
            }
          }
        }
      }
    }
    &-fireimg {
      display: none;
    }
  }
}
</style>